<template>
  <a-card :style="{ height: '100%' }">
    <div class="flex justify-between">
      <p class="info">现金流</p>
      <p>单位：NZD</p>
    </div>
    <p>预计还款总额：{{ minMoney(cashAddAllPrincipal) }}</p>
    <p>未付汇款总额：{{ minMoney(noLoanAmount) }}</p>
    <p>现金流入/流出：{{ minMoney(cash) }}</p>
    <div class="flex">
      目标距离预计百分比：
      <p v-if="flag">{{ `${CashPercent} %` }}<a-icon type="edit" @click="edit" /></p>
      <a-input-number :min="0" :precision="2" v-else v-model="CashPercent" @blur="input" style="width:100px" />
    </div>
    <p>现金需求：{{ minMoney(cashNeed) }}</p>
    <p>全年现金流入/流出：{{ minMoney(allyear) }}</p>
  </a-card>
</template>
<script>
import { getCashFlow, createCashPercent } from '@/api/common'
export default {
  name: 'CashFlow',
  components: {},
  props: [''],
  data() {
    return {
      flag: true,
      CashPercent: 0,
      cashAddAllPrincipal: 0,
      noLoanAmount: 0,
      cash: 0,
      cashNeed: 0,
      allyear: 0
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    edit() {
      this.flag = false
    },
    input() {
      this.flag = true
      createCashPercent({ CashPercent: this.CashPercent })
    },
    async getData() {
      const res = await getCashFlow()
      this.cashAddAllPrincipal = res.result.data.cashAddAllPrincipal
      this.noLoanAmount = res.result.data.noLoanAmount
      this.cash = res.result.data.cash
      this.CashPercent = res.result.data.CashPercent
      this.cashNeed = res.result.data.cashNeed
      this.allyear = res.result.data.allyear
    },
    minMoney(v) {
      v = Number(v).toFixed(2)
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    }
  },
  created() {}
}
</script>
<style lang="css" scoped>
.info {
  border-left: 2px solid #1890ff;
  padding-left: 10px;
  font-size: 20px;
}
</style>
